import { useDark } from '@vueuse/core'

export function useTheme() {
  const isDark = useDark({
    selector: 'body',
    attribute: 'arco-theme',
    valueDark: 'dark',
    valueLight: 'light',
    onChanged(isDark, defaultHandler, mode) {
      defaultHandler(mode)
      document.documentElement.classList.toggle('dark', isDark)
    }
  })

  function toggleTheme() {
    isDark.value = !isDark.value
  }

  return {
    isDark,
    toggleTheme
  }
}
